<template>
  <el-card>
    <!-- 面包屑 -->
    <my-bread leavel1="商品管理"
              leavel2="商品列表"></my-bread>
    <!-- 提示信息 -->
    <el-alert title="添加商品信息"
              style="margin-top: 15px"
              type="success"
              center
              show-icon>
    </el-alert>
    <!-- 步骤条 :space="800" margin-left:100px -->
    <el-steps :active="1*active"
              space="300px"
              finish-status="success"
              style="margin-top: 15px;margin-left:150px">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <!-- tab 因为我们要提交相关数据，所以我们的最外层应该是一个表单数据-->
    <el-form label-position="top"
             :model="form"
             style="height: 400px;overflow:auto;">
      <el-tabs tab-position="left"
               @tab-click="tabchange()"
               v-model="active"
               style="margin-top: 15px">
        <el-tab-pane name='1'
                     label="基本信息">
          <el-form-item label="商品名称">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 级联选择器 -->
            <el-cascader v-model="value"
                         :options="options"
                         clearable
                         :props="{ expandTrigger: 'hover' }"></el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name='2'
                     label="商品参数">
          <!-- 显示的是该三级分类的商品参数 -->
          <el-form-item label="XXX">
            <!-- 复选框组 -->
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="复选框 A"
                           border></el-checkbox>
              <el-checkbox label="复选框 B"
                           border></el-checkbox>
              <el-checkbox label="复选框 C"
                           border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        </el-tab-pane>
        <el-tab-pane name='3'
                     label="商品属性">
          <!-- 静态参数的数据 -->
          <el-form-item label="名称">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="数据1">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="数据1">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="数据1">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="数据1">
            <el-input></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name='4'
                     label="商品图片">
          <el-form-item>
            <el-upload class="upload-demo"
                       action="https://jsonplaceholder.typicode.com/posts/"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :file-list="fileList"
                       list-type="picture">
              <el-button size="small"
                         type="primary">点击上传</el-button>
              <div slot="tip"
                   class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane name='5'
                     label="商品内容">
          <el-form-item>
            <!-- 表单元素 -->
            <el-button type="primary">添加</el-button>
            <!-- 富文本编辑器 -->
            <quill-editor></quill-editor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </el-card>

</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

import { quillEditor } from 'vue-quill-editor';
export default {
  data() {
    return {
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ],
      active: '1',
      form: {},
      value: [],
      checkList: ['选中且禁用', '复选框 A'],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
                {
                  value: 'xiaolv',
                  label: '效率',
                },
                {
                  value: 'kekong',
                  label: '可控',
                },
              ],
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航',
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 点击不同的tab时触发该方法
    tabchange() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  components: {
    quillEditor,
  },
};
</script>

<style>
.ql-editor {
  min-height: 300px;
}
</style>